import {PiniaPluginContext} from 'pinia'
import { getStorage, setStorage } from "../utils/storage"
import {toRaw} from 'vue'


//定义兜底变量
const __piniaKey = '__PINIAKEY__'

//定义入参类型
type Options = {
  key?: string
}


//利用函数柯丽化接受用户入参
const piniaPlugin = (options: Options) => {

  //将函数返回给pinia  让pinia  调用 注入 context
  return (context: PiniaPluginContext) => {
    const { store } = context;
    const data = getStorage(`${options?.key ?? __piniaKey}-${store.$id}`)

    //  监控 state 变化
    store.$subscribe(() => {
      setStorage(`${options?.key ?? __piniaKey}-${store.$id}`, toRaw(store.$state));
    })

    //返回值覆盖pinia 原始值
    return {
      ...data
    }

  }

}

export default piniaPlugin
